<template>
    <div class="Attention_Theme_Card">
        <div class="Attention_Theme-Pc">
            <div class="box" 
            v-for="item in content"
            :key="item.id">
                <div class="top">
                    <router-link 
                    :to="{path:'/Community/Article',query:{address: 'null'}}"
                    tag="div"
                    class="left">
                    {{item.title}}
                    </router-link>
                    <div class="right">
                        {{item.fuzzyTime}}
                    </div>
                </div>
                <div class="bottom">
                    <div class="icon">
                        <i class="el-icon-view">{{item.view}}</i>
                          
                    </div>
                    <div class="icon">
                        <i class="el-icon-chat-dot-square">{{item.review}}</i>
                          
                    </div>
                    <div class="icon">
                        <i class="el-icon-star-on">{{item.like}}</i>
                          
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'Attention_Theme',
    props: ['content'],
    mounted(){
        console.log(this.content)
    }
}
</script>
<style scoped>
@media screen and (min-width:981px){
.Attention_Theme-Pc{
    display: block;
    width:100%;
}
.Attention_Theme-Mobile{
    display: none;
}
.box{
    width:100%;
    padding: 15px 20px 0 25px;
    height: 100px;
    border-bottom: 1px solid #e6e6e6;
}
.box .top{
    width: 100%;
    height: 50px;
}
.box .top .left{
    float: left;
    font-size: 18px;
    line-height: 50px;
    height: 50px;
    cursor: pointer;
    color: #686868;
    transition: all 0.2s ease   ;
}
.box .top .left:hover{
    color: #121212;
}
.box .top .right{
    float: right;
    font-size: 13px;
    line-height: 40px;
    height: 50px;
    color: rgb(170, 169, 169);
}
.box .bottom{
    float: left;
    width:100%;
    height: 35px;
}
.box .bottom .icon{
    float: left;
    padding-left:10px;
    padding-right:50px;
    width:60px;
    height: 35px;
    font-size: 13px;
    line-height: 35px;
    color: #a39f9f;
}
}
@media screen and (max-width:980px){
.Attention_Theme-Pc{
    display: none;
}
.Attention_Theme-Mobile{
    display: block;
    width:100%;  
}
.box{
    width:100%;
    padding: 10px 10px 0 10px;
    height: 100px;
    border-bottom: 1px solid #e6e6e6;
}
.box .top{
    width: 100%;
    height: 50px;
}
.box .top .left{
    float: left;
    width: 80%;
    font-size: 18px;
    line-height: 50px;
    height: 50px;
    text-overflow: ellipsis;
    white-space:nowrap;
    overflow:hidden;
}
.box .top .left:hover{
    color: blue;
}
.box .top .right{
    float: right;
    font-size: 13px;
    line-height: 40px;
    height: 50px;
    color: rgb(170, 169, 169);
}
.box .bottom{
    float: left;
    width:100%;
    height: 35px;
}
.box .bottom .icon{
    float: left;
    padding-left:10px;
    padding-right:50px;
    width:60px;
    height: 35px;
    font-size: 13px;
    line-height: 35px;
    color: #a39f9f;
}
}
</style>